<template>
	<view class="publish">
		<view class="main-image">
			<view class="left">
				<view class="title">
					<text>活动封面</text>
				</view>
				<view class="desc">
					<text>1.图片上传比例3:4</text>
					<text>2.精美的活动封面有助于吸引用户的 关注，提高报名率。</text>
				</view>
			</view>
			
			
			<view class="right">
				<view class="img" @click="uploadpic">
					<image class="add" 
					v-if="!formData.image"
					:src="baseUrl + '/static/wximages/icon-09.png'" 
					mode="widthFix"></image>
					
					<image class="image"
					v-else
					:src="formData.image" 
					mode="aspectFill"></image>
				</view>
			</view>
		</view>
		
		
		<view class="form">
			<view class="title">
				<text>活动信息</text>
			</view>
			
			<view class="form-back">
				<view class="li">
					<view class="sr">
						<text>活动名称</text>
						<input type="text" v-model="formData.title" placeholder="请输入活动名" />
					</view>
					<view class="icon">
					</view>
				</view>
				<view class="li">
					<view class="sr">
						<text>活动类型</text>
						<input disabled v-model="formData.ctitle" type="text" @click="onSelectIndustryChange" placeholder="请输入活动名" />
					</view>
					<view class="icon">
						<image  :src="baseUrl + '/static/wximages/icon-10.png'" mode="widthFix"></image>
					</view>
				</view>
			</view>
			
			<view class="form-back">
				<view class="li">
					<view class="sr">
						<text>活动日期</text>
						
						<view class="picker-w">
							<picker mode="date" 
									:start="tomorrowDate" 
									:value="formData.start_time" 
									@change="bindDateChange"
									style="width: 100%;">
								<view class="picker-input">
									<view class="place" v-if="!formData.start_time">选择活动日期</view>
									<view class="itxt" v-else>{{formData.start_time}}</view>
								</view>
							</picker>
						</view>
						
					</view>
					<view class="icon">
						<image  :src="baseUrl + '/static/wximages/icon-10.png'" mode="widthFix"></image>
					</view>
				</view>
				<view class="li">
					<view class="sr">
						<text>开始时间</text>
						
						<view class="picker-w">
							<picker mode="time" 
									:value="formData.start_time_sfm" 
									@change="bindTimeChange"
									style="width: 100%;">
								<view class="picker-input">
									<view class="place" v-if="!formData.start_time_sfm">选择开始时间</view>
									<view class="itxt" v-else>{{formData.start_time_sfm}}</view>
								</view>
							</picker>
						</view>
		
					</view>
					<view class="icon">
						<image  :src="baseUrl + '/static/wximages/icon-10.png'" mode="widthFix"></image>
					</view>
				</view>
				
				<view class="li">
					<view class="sr">
						<text>结束时间</text>
						<view class="picker-w">
							<picker mode="time" 
									:value="formData.end_time_sfm" 
									@change="bindEndTimeChange"
									style="width: 100%;">
								<view class="picker-input">
									<view class="place" v-if="!formData.end_time_sfm">选择结束时间</view>
									<view class="itxt" v-else>{{formData.end_time_sfm}}</view>
								</view>
							</picker>
						</view>
					</view>
					<view class="icon">
						<image  :src="baseUrl + '/static/wximages/icon-10.png'" mode="widthFix"></image>
					</view>
				</view>
				
				
				
				
				<view class="li">
					<view class="sr">
						<text>报名截止</text>
						
						
						
						<view class="picker-w">
							<picker mode="date" 
								:value="formData.deadline_time" 
								@change="bindDeadlineDateChange"
								style="width: 100%;">
								<view class="picker-input">
									<view class="place" v-if="!formData.deadline_time">选择截止时间</view>
									<view class="itxt" v-else>{{formData.deadline_time}}</view>
								</view>
								
							</picker>
						</view>
				
					</view>
					<view class="icon">
						<image  :src="baseUrl + '/static/wximages/icon-10.png'" mode="widthFix"></image>
					</view>
				</view>
				
				
				
				
				<view class="li">
					<view class="sr">
						<text>人数限制</text>
						<input type="number" v-model="formData.limited" placeholder="发起人不计入活动人数" />
					</view>
					<view class="icon">
					</view>
				</view>
				<view class="li">
					<view class="sr">
						<text>活动地点</text>
						<view class="region">
							<picker mode="region"
									:value="formData.region"
									@change="bindPickerChange"
									style="width: 100%;padding: 5rpx 0;"
									>
								<text>{{formData.region ? formData.region : '选择地区'}}</text>
							</picker>
						</view>
						
					</view>
					<view class="icon">
						<image class="address" :src="baseUrl + '/static/wximages/icon-10.png'" mode="widthFix"></image>
					</view>
				</view>
				<view class="li">
					<view class="sr">
						<text>详细地址</text>
						<input type="text" v-model="formData.address" placeholder="选填，如街道、楼栋" />
					</view>
					<view class="icon">
					</view>
				</view>
			</view>
			
			
			
			
			<view class="form-back">
				<view class="li desc">
					<view class="sr">
						<text>活动介绍</text>
						<textarea v-model="formData.descs" placeholder="介绍一下这个活动吧~"></textarea>
					</view>
					
					
					<view class="upload">
						<view class="upload-con">
							<shmily-drag-image
								v-model="imageList" 
								keyName="images"
								:addImage="addImage" 
								:delImage="delImage"
								:number="20"
							></shmily-drag-image>
						</view>
						<view class="upload-tips">最多可以添加九张图片</view>
					</view>
				</view>
			</view>
			
			
			
			
			
		</view>
		
		
		
		<uni-popup ref="popup" type="bottom">
			<view class="industry-popup">
				<view class="title">
					<text>活动选择</text>
				</view>
				
				<view class="industry-popup-list">
					<view class="industry-popup-li"
						  v-for="(item,index) in categoryList"
						  :key="index"
						  @click="onIndustryChange(index)"
						  :class="categoryIndex == index ? 'on' : '' ">
						<text>{{item.title}}</text>
					</view>
				</view>
				
				<button class='btn' @click="onIndustrySubmit">确定</button>
			</view>
		</uni-popup>
		
		<view class="btns">
			<button @click="onSubmit">{{id ? '立即提交' : '立即发布'}}</button>
		</view>
	</view>
</template>

<script>

	import { getCircleCategoryList,circlePublish,getCircleInfo } from '@/api/reserve.js';
			
			
	export default {
		data() {
			return {
				imageList:[],
				categoryList: [],
				categoryIndex: 0,
				formData: {
					image: '',
					title: '',
					cid: 0,
					ctitle: '',
					start_time: '',
					
					start_time_sfm: '',
					end_time_sfm: '',
					
					deadline_time: '',
					region: '',
					address: '',
					descs: '',
					detail_img: '',
					limited: '',
					id: 0
				},
				
				
				
				id: '',
				tomorrowDate: '',
				baseUrl: this.$baseUrl
			}
		},
		onShow() {
			var today = new Date();
			
			// 获取明天的日期
			var tomorrow = new Date(today);
			tomorrow.setDate(today.getDate() + 1);
			
			// 格式化日期为年-月-日的字符串
			this.tomorrowDate = tomorrow.toISOString().slice(0, 10);
			
		},
		onReady() {
			this.categoryLists()
		},
		onLoad(ops) {
			if (ops.id) {
				this.id = ops.id;
			}
		},
		methods: {
			
			getCircleInfo() {
				getCircleInfo({
					id: this.id
				}).then(res => {
					this.formData.image = res.data.image;
					this.formData.title = res.data.title;
					this.formData.limited = res.data.limited;
					this.formData.region = res.data.region;
					this.formData.address = res.data.address_desc;
					this.formData.descs = res.data.descs;
					
					if (res.data.detail_img) {
						this.imageList = res.data.detail_img;
					}
					
					let start_time = res.data.start_time.split(' ');
					let end_time = res.data.end_time.split(' ');
					
					if (start_time.length > 1) {
						this.formData.start_time = start_time[0];
						this.formData.start_time_sfm = start_time[1];
						this.formData.end_time_sfm = end_time[1];
					}
					this.formData.deadline_time = res.data.deadline_time;
						
					this.categoryList.forEach((item,index) => {
						if (res.data.cid == item.id) {
							this.categoryIndex = index;
						}
					})
					
					this.formData.ctitle = this.categoryList[this.categoryIndex].title;
					this.formData.cid = this.categoryList[this.categoryIndex].id;
					
				})
			},
			
			
			
			bindDateChange: function(e) {
				this.formData.start_time = e.detail.value
				
				
				if (this.formData.deadline_time) {
					var isdx = this.timeComparisonDx(this.formData.start_time, this.formData.deadline_time);
					if (!isdx) {
						this.formData.deadline_time = '';
					}
				}
			},
			bindTimeChange: function(e) {
				this.formData.start_time_sfm = e.detail.value
				if (this.formData.end_time_sfm) {
					var issf = this.compareTime(this.formData.start_time_sfm,
									this.formData.end_time_sfm);
									
					if (issf != -1) {
						this.formData.end_time_sfm = '';
					}
				}
			},
			
			bindEndTimeChange: function(e) {
				this.formData.end_time_sfm = e.detail.value;
				if (this.formData.start_time_sfm) {
					var issf = this.compareTime(this.formData.start_time_sfm,
									this.formData.end_time_sfm);
									
					if (issf != -1) {
						this.$util.Tips({
							title: '结束时间要大于开始时间'
						});
						this.formData.end_time_sfm = '';
					}
				}
				
				
			},
	
			bindDeadlineDateChange: function(e) {
				
				if (this.formData.start_time) {
					var isdx = this.timeComparisonDx(this.formData.start_time, e.detail.value);
					if (!isdx) {
						this.$util.Tips({
							title: '截止日期要小与活动日期'
						});
						this.formData.deadline_time = '';
						return false;
					}
					
				}
				this.formData.deadline_time = e.detail.value
			},
			// 比较两个时间的时分部分
			compareTime(time1, time2) {
			    var time1Parts = time1.split(":");
			    var time2Parts = time2.split(":");
			
			    var hour1 = parseInt(time1Parts[0]);
			    var minute1 = parseInt(time1Parts[1]);
			    var hour2 = parseInt(time2Parts[0]);
			    var minute2 = parseInt(time2Parts[1]);
			
			    if (hour1 > hour2 || (hour1 === hour2 && minute1 > minute2)) {
			        return 1; // time1 大于 time2
			    } else if (hour1 < hour2 || (hour1 === hour2 && minute1 < minute2)) {
			        return -1; // time1 小于 time2
			    } else {
			        return 0; // time1 等于 time2
			    }
			},

			timeComparisonDx(a1, a2) {
				var date1 = new Date(a1);
				var date2 = new Date(a2);
				
				var timestamp1 = date1.getTime();
				var timestamp2 = date2.getTime();
				
				if (timestamp2 >= timestamp1) {
					return false;
				} else {
					return true;
				}
			},
			
			onJmup(url) {
				uni.navigateTo({
					url: url
				})
			},
			onSelectIndustryChange() {
				this.$refs.popup.open('bottom')
			},
			onIndustryChange(index) {
				this.categoryIndex = index;
			},
			onIndustrySubmit() {
				this.formData.ctitle = this.categoryList[this.categoryIndex].title;
				
				this.$refs.popup.close();
			},
			categoryLists() {
				getCircleCategoryList().then(res => {
					this.categoryList = res.data;
					if (this.id) {
						this.getCircleInfo();
					} else {
						this.formData.ctitle = this.categoryList[this.categoryIndex].title;
						this.formData.cid = this.categoryList[this.categoryIndex].id;
					}
					
				})
			},
			
			bindPickerChange(e){
				this.$set(this.formData, 'region',e.detail.value.join('-'));
			},
			
			
			
			
			
			
			addImage() {
			  // 将图片地址添加到图片数组
			  this.uploadImage()
			},
			delImage(done) {
			  uni.showModal({
			    content: '是否删除?',
			    success: (res) => {
			      if(res.confirm) {
			        // 执行 done() 删除
			        done()
			      }
			    }
			  })
			},
			
			uploadImage: function(index) {
				let that = this;
				
				let opt = {
					count: 20,
					url: 'upload/image'
				};
				
				that.$util.uploadImageOne(opt, function(res) {
					that.imageList.push({
						images: res.data.url,
						id: 0
					})
				});
			},
			
			/**
			 * 上传文件
			 * 
			 */
			uploadpic: function() {
				let that = this;
				this.$util.uploadImageOne('upload/image', function(res) {
					that.$set(that.formData, 'image',res.data.url);
				});
			},
			
			
			
			
			onSubmit() {
				this.formData.cid = this.categoryList[this.categoryIndex].id;
				this.formData.detail_img = this.imageList;
				if (!this.formData.image) {
					return this.$util.Tips({
						title: '请上传活动封面'
					});
				}
				if (!this.formData.title) {
					return this.$util.Tips({
						title: '请输入活动名称'
					});
				}
				if (!this.formData.cid) {
					return this.$util.Tips({
						title: '请选择活动类型'
					});
				}
				if (!this.formData.start_time) {
					return this.$util.Tips({
						title: '请选择活动日期'
					});
				}
				if (!this.formData.start_time_sfm) {
					return this.$util.Tips({
						title: '请选择开始时间'
					});
				}
				if (!this.formData.end_time_sfm) {
					return this.$util.Tips({
						title: '请选择结束时间'
					});
				}
				
				if (!this.formData.deadline_time) {
					return this.$util.Tips({
						title: '请选择截止日期'
					});
				}
				
				if (!this.formData.limited) {
					return this.$util.Tips({
						title: '请输入人数限制'
					});
				}
				if (!this.formData.region) {
					return this.$util.Tips({
						title: '请选择活动地址'
					});
				}
				if (!this.formData.address) {
					return this.$util.Tips({
						title: '请输入详细地址'
					});
				}
				
				if (!this.formData.descs) {
					return this.$util.Tips({
						title: '请输入活动介绍'
					});
				}
				
				let formData = {
					id: this.id,
					start_time:this.formData.start_time,
					
					start_time_sfm: this.formData.start_time_sfm,
					end_time_sfm: this.formData.end_time_sfm,
					deadline_time: this.formData.deadline_time,
					
					descs: this.formData.descs,
					address: this.formData.address,
					region: this.formData.region,
					limited: this.formData.limited,
					cid: this.formData.cid,
					title: this.formData.title,
					image: this.formData.image,
					detail_img: this.formData.detail_img
				}
				
				uni.showLoading({
					title: '发布中'
				});
				circlePublish(formData).then(res => {
					
					return this.$util.Tips({
						title: res.msg,
						icon: 'success'
					}, {
						tab: 2,
						url: '/pages/reserve/activity/index'
					});
				}).catch(err => {
					uni.hideLoading();
					return this.$util.Tips({
						title: err
					});
				})
			},
		}
	}
</script>
<style>
	page {
		background: #003153;
	}
</style>
<style scoped lang="scss">
	.publish {
		padding: 30rpx;
	}
	.main-image {
		width: 685rpx;
		height: 321rpx;
		background: #FFFFFF;
		padding: 44rpx;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		.left {
			.title {
				font-weight: 400;
				font-size: 35rpx;
				color: #3D3D3D;
			}
			.desc {
				font-size: 25rpx;
				color: #979797;
				margin-top: 20rpx;
				line-height: 38rpx;
				display: flex;
				flex-direction: column;
			}
		}
		.right {
			.img {
				flex: 0 0 182rpx;
				width: 182rpx;
				height: 236rpx;
				background: #F8F8F9;
				margin-left: 20rpx;
				border-radius: 15rpx 15rpx 15rpx 15rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.add {
					width: 48rpx;
					height: 54rpx;
				}
				.image {
					width: 100%;
					height: 100%;
				}
			}
			
		}
	}
	
	.form {
		margin-top: 20rpx;
		margin-bottom: 300rpx;
		.title {
			font-weight: 400;
			font-size: 35rpx;
			color: #FFFAFA;
			padding: 25rpx 0;
		}
		
		.form-back {
			width: 685rpx;
			background: #FFFFFF;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
			padding:0 20rpx;
			margin-bottom: 35rpx;
			.li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-top: 1rpx solid #D8D8D8;
				padding: 25rpx 0;
				&:nth-child(1) {
					border-top: none;
				}
				
				&.desc {
					flex-direction: column;
					align-items: flex-start;
					.sr {
						width: 100%;
						flex-direction: column;
						align-items: flex-start;
						textarea {
							width: 100%;
							height: 500rpx;
							margin-top: 10rpx;
						}
					}
					.upload {
						width: 100%;
						.upload-con {
							width: 100%;
						}
						.upload-tips {
							font-weight: 500;
							font-size: 25rpx;
							color: #CCCCCC;
							margin-top: 10rpx;
						}
					}
				}
				
				.sr {
					width: 100%;
					display: flex;
					align-items: center;
					font-size: 30rpx;
					color: #3D3D3D;
					text {
						flex: 0 0 auto;
						font-weight: 500;
						font-size: 34rpx;
					}
					input {
						width: 100%;
						height: 60rpx;
						margin-left: 20rpx;
					}
					.region {
						width: 100%;
						margin-left: 20rpx;
						text {
							font-weight: 400;
							font-size: 30rpx;
						}
					}
					
					.picker-w {
						width: 100%;
						margin-left: 20rpx;
						display: flex;
						align-items: center;
						.place {
							color: #777;
						}
						.itxt {
							margin-left: 10rpx;
						}
					}
				}
				.icon {
					flex: 0 0 50rpx;
					display: flex;
					justify-content: flex-end;
					image {
						width: 13rpx;
						height: 23rpx;
						// &.address {
						// 	width: 24rpx;
						// 	height: 29rpx;
						// }
					}
					
				}
			}
		}
	}
	
	.btns {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9;
		background-color: #003153;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 40rpx;
		button {
			width: 680rpx;
			height: 80rpx;
			background: #0B9AFF;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
			font-size: 35rpx;
			color: #fff;
			text-align: center;
			line-height: 79rpx;
		}
	}
	
	
	
	.industry-popup {
		border-radius: 17rpx 17rpx 0rpx 0rpx;
		background-color: #fff;
		padding: 0 37rpx 37rpx 37rpx;
		.title {
			font-size: 34rpx;
			padding: 30rpx 0;
			color: #000000;
			text-align: center;
			border-bottom: 2rpx solid #F3F6F8;
		}
		
		.industry-popup-list {
			height: 50vh;
			overflow: auto;
			padding: 20rpx 0;
			.industry-popup-li {
				height: 84rpx;
				text-align: center;
				font-size: 29rpx;
				color: #656C74;
				line-height: 84rpx;
				box-sizing: border-box;
				&.on {
					color: #7C87A1;
					border-top: 2rpx solid #7C87A1;
					border-bottom: 2rpx solid #7C87A1;
				}
				&:hover {
					color: #7C87A1;
					border-top: 2rpx solid #7C87A1;
					border-bottom: 2rpx solid #7C87A1;
				}
			}
		}
		
		.btn {
			width: 100%;
			height: 101rpx;
			line-height: 101rpx;
			margin: auto;
			background: #0B9AFF;
			border-radius: 17rpx 17rpx 17rpx 17rpx;
			color: #fff;
		}
	}
	
</style>